Stencil: نظرة معمقة على مُصرف مكونات الويب المكتوب بلغة TypeScript

في المشهد المتطور باستمرار لتطوير الويب، تعد الحاجة إلى مكونات قابلة لإعادة الاستخدام والتطوير والصيانة أمرًا بالغ الأهمية. يظهر Stencil، وهو مصرف TypeScript، كأداة قوية لتلبية هذه الحاجة من خلال تمكين المطورين من بناء مكونات ويب (Web Components) تتكامل بسلاسة مع مختلف أطر العمل أو حتى تعمل كعناصر مستقلة.

ما هي مكونات الويب؟

قبل الغوص في Stencil، دعنا نفهم الأساس الذي بني عليه: مكونات الويب. مكونات الويب هي مجموعة من واجهات برمجة تطبيقات منصة الويب (web platform APIs) التي تسمح لك بإنشاء عناصر HTML مخصصة قابلة لإعادة الاستخدام مع تنسيق وسلوك مغلف. هذا يعني أنه يمكنك تحديد علاماتك الخاصة مثل <my-component> واستخدامها عبر تطبيقات الويب الخاصة بك، بغض النظر عن إطار العمل الذي تستخدمه (أو لا تستخدمه!).

تشمل التقنيات الأساسية وراء مكونات الويب ما يلي:

• العناصر المخصصة (Custom Elements): تسمح لك بتعريف عناصر HTML الخاصة بك.
• Shadow DOM: يوفر التغليف، مما يضمن عدم تداخل تنسيق وسلوك المكون مع بقية الصفحة.
• قوالب HTML (HTML Templates): توفر طريقة لتعريف هياكل HTML قابلة لإعادة الاستخدام.

تقديم Stencil

Stencil هو مصرف يقوم بإنشاء مكونات ويب. تم بناؤه بواسطة فريق Ionic ويستفيد من TypeScript و JSX ومعايير الويب الحديثة لإنشاء مكونات محسّنة وعالية الأداء. يتجاوز Stencil مجرد تصريف الكود؛ فهو يضيف العديد من الميزات الرئيسية التي تجعل بناء وصيانة مكونات الويب أسهل وأكثر كفاءة.

الميزات والفوائد الرئيسية لـ Stencil

1. دعم TypeScript و JSX

يتبنى Stencil لغة TypeScript، مما يوفر كتابة قوية للأنواع، وتحسينًا لتنظيم الكود، وزيادة في إنتاجية المطورين. يسمح استخدام JSX بطريقة تعريفية وبديهية لتحديد واجهة المستخدم للمكون.

مثال:

خذ بعين الاعتبار مكون عداد بسيط مكتوب في Stencil:

            
import { Component, State, h } from '@stencil/core';

@Component({
  tag: 'my-counter',
  styleUrl: 'my-counter.css',
  shadow: true
})
export class MyCounter {
  @State() count: number = 0;

  increment() {
    this.count++;
  }

  render() {
    return (
      <div class="counter-container">
        <p>Count: {this.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}

            

              
                Copy
              
            
          

2. ربط البيانات التفاعلي

يقدم Stencil طريقة مباشرة لإدارة حالة المكون وتحديث واجهة المستخدم بشكل تفاعلي. باستخدام مزين @State، تؤدي التغييرات في حالة المكون تلقائيًا إلى إعادة العرض، مما يضمن أن واجهة المستخدم متزامنة دائمًا مع البيانات.

مثال:

في مثال العداد أعلاه، فإن الإعلان @State() count: number = 0; يجعل متغير count تفاعليًا. في كل مرة يتم فيها استدعاء دالة increment()، يتم تحديث متغير count، ويعيد المكون العرض ليعكس القيمة الجديدة.

3. DOM الافتراضي والعرض الفعال

يستخدم Stencil نموذج كائن المستند الافتراضي (Virtual DOM) لتحسين أداء العرض. يتم تطبيق التغييرات على الـ DOM الافتراضي أولاً، ثم يتم تطبيق التحديثات الضرورية فقط على الـ DOM الفعلي، مما يقلل من عمليات التلاعب المكلفة في الـ DOM.

4. التصريف المسبق (AOT)

يقوم Stencil بالتصريف المسبق (AOT)، مما يعني أن الكود يتم تصريفه أثناء عملية البناء بدلاً من وقت التشغيل. ينتج عن هذا أوقات تحميل أولية أسرع وأداء محسن وقت التشغيل.

5. التحميل الكسول (Lazy Loading)

يتم تحميل المكونات بشكل كسول افتراضيًا، مما يعني أنها لا تُحمَّل إلا عند الحاجة إليها. يساعد هذا في تقليل وقت تحميل الصفحة الأولي وتحسين الأداء العام للتطبيق.

6. التوافق عبر أطر العمل

إحدى المزايا الرئيسية لـ Stencil هي قدرته على إنشاء مكونات ويب متوافقة مع مختلف أطر العمل، بما في ذلك React و Angular و Vue.js وحتى HTML العادي. يتيح لك هذا بناء مكتبة مكونات مرة واحدة وإعادة استخدامها عبر مشاريع متعددة، بغض النظر عن إطار العمل المستخدم.

7. دعم تطبيقات الويب التقدمية (PWA)

يوفر Stencil دعمًا مدمجًا لـ PWAs، مما يسهل إنشاء تطبيقات ويب قابلة للتثبيت وموثوقة وجذابة. يتضمن ميزات مثل إنشاء service worker ودعم manifest.

8. أحجام حزم صغيرة

تم تصميم Stencil لإنتاج أحجام حزم صغيرة، مما يضمن تحميل مكوناتك بسرعة وكفاءة. يحقق ذلك من خلال تقنيات مثل tree-shaking وتقسيم الكود.

9. الأدوات وتجربة التطوير

يقدم Stencil مجموعة غنية من الأدوات والميزات التي تعزز تجربة التطوير، بما في ذلك:

• الاستبدال السريع للوحدات (HMR): يسمح لك برؤية التغييرات في مكوناتك في الوقت الفعلي دون الحاجة إلى تحديث الصفحة.
• دعم التصحيح (Debugging): يوفر أدوات لتصحيح أخطاء مكوناتك في المتصفح.
• إطار عمل الاختبار: يتضمن إطار عمل اختبار مدمجًا لكتابة اختبارات الوحدة والتكامل.
• مولد التوثيق: يقوم تلقائيًا بإنشاء توثيق لمكوناتك.

البدء مع Stencil

للبدء مع Stencil، ستحتاج إلى تثبيت Node.js و npm (أو yarn) على نظامك. يمكنك بعد ذلك تثبيت Stencil CLI عالميًا باستخدام الأمر التالي:

            
npm install -g @stencil/core

            

              
                Copy
              
            
          

بمجرد تثبيت CLI، يمكنك إنشاء مشروع Stencil جديد باستخدام الأمر stencil init:

            
stencil init my-component-library

            

              
                Copy
              
            
          

سيؤدي هذا إلى إنشاء دليل جديد يسمى my-component-library بهيكل مشروع Stencil أساسي. يمكنك بعد ذلك الانتقال إلى الدليل وبدء خادم التطوير باستخدام الأمر npm start:

            
cd my-component-library
npm start

            

              
                Copy
              
            
          

سيؤدي هذا إلى بدء خادم التطوير وفتح مشروعك في متصفح الويب. يمكنك بعد ذلك البدء في إنشاء مكونات الويب الخاصة بك عن طريق تعديل الملفات في دليل src/components.

مثال: بناء مكون إدخال بسيط

لنقم بإنشاء مكون إدخال بسيط باستخدام Stencil. سيسمح هذا المكون للمستخدمين بإدخال نص وعرضه على الصفحة.

1. إنشاء ملف مكون جديد

أنشئ ملفًا جديدًا باسم my-input.tsx في دليل src/components.

2. تعريف المكون

أضف الكود التالي إلى ملف my-input.tsx:

            
import { Component, State, h, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'my-input',
  styleUrl: 'my-input.css',
  shadow: true
})
export class MyInput {
  @State() inputValue: string = '';
  @Event() inputChanged: EventEmitter;

  handleInputChange(event: any) {
    this.inputValue = event.target.value;
    this.inputChanged.emit(this.inputValue);
  }

  render() {
    return (
      <div class="input-container">
        <input type="text" value={this.inputValue} onInput={(event) => this.handleInputChange(event)} />
        <p>You entered: {this.inputValue}</p>
      </div>
    );
  }
}

            

              
                Copy
              
            
          

يعرّف هذا الكود مكونًا جديدًا يسمى my-input. يحتوي على متغير حالة inputValue يخزن النص الذي أدخله المستخدم. يتم استدعاء دالة handleInputChange() عندما يكتب المستخدم في حقل الإدخال. تقوم هذه الدالة بتحديث متغير الحالة inputValue وتصدر حدث inputChanged بالقيمة الجديدة.

3. إضافة التنسيق

أنشئ ملفًا جديدًا باسم my-input.css في دليل src/components وأضف CSS التالي:

            
.input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}

input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  margin-bottom: 10px;
}


            

              
                Copy
              
            
          

4. استخدام المكون في تطبيقك

يمكنك الآن استخدام مكون my-input في تطبيقك عن طريق إضافة الكود التالي إلى ملف HTML الخاص بك:

            
<my-input></my-input>

            

              
                Copy
              
            
          

مفاهيم متقدمة في Stencil

1. تركيب المكونات

يسمح لك Stencil بتركيب المكونات معًا لإنشاء واجهات مستخدم أكثر تعقيدًا. يتضمن ذلك تداخل المكونات داخل بعضها البعض وتمرير البيانات بينها باستخدام الخصائص والأحداث.

2. الخصائص والأحداث

تُستخدم الخصائص (Properties) لتمرير البيانات من مكون أب إلى مكون ابن. يتم تعريفها باستخدام مزين @Prop().

تُستخدم الأحداث (Events) للتواصل من مكون ابن إلى مكون أب. يتم تعريفها باستخدام مزين @Event() ويتم إصدارها باستخدام دالة emit().

3. دوال دورة الحياة

يوفر Stencil مجموعة من دوال دورة الحياة التي تسمح لك بالتدخل في مراحل مختلفة من دورة حياة المكون. تشمل هذه الدوال:

• componentWillLoad(): تُستدعى قبل عرض المكون لأول مرة.
• componentDidLoad(): تُستدعى بعد عرض المكون لأول مرة.
• componentWillUpdate(): تُستدعى قبل تحديث المكون.
• componentDidUpdate(): تُستدعى بعد تحديث المكون.
• componentWillUnload(): تُستدعى قبل إزالة المكون من الـ DOM.

4. الاختبار

يوفر Stencil إطار عمل اختبار مدمج يعتمد على Jest. يمكنك استخدام هذا الإطار لكتابة اختبارات الوحدة والتكامل لمكوناتك. الاختبار أمر بالغ الأهمية لضمان أن مكوناتك تعمل بشكل صحيح ولمنع التراجعات.

Stencil مقابل أطر عمل مكونات الويب الأخرى

في حين أن Stencil ليس الخيار الوحيد لبناء مكونات الويب، إلا أنه يميز نفسه من خلال تركيزه على الأداء والتوافق عبر أطر العمل وتجربة مطور مبسطة. تقدم أطر عمل أخرى مثل LitElement و Polymer أيضًا حلولاً لتطوير مكونات الويب، ولكن ميزات Stencil الفريدة مثل التصريف المسبق (AOT) والتحميل الكسول توفر مزايا مميزة في سيناريوهات معينة.

أمثلة وحالات استخدام من الواقع

• أنظمة التصميم (Design Systems): تستخدم العديد من المؤسسات Stencil لإنشاء مكتبات مكونات قابلة لإعادة الاستخدام لأنظمة التصميم الخاصة بها. يمكن استخدام هذه المكتبات عبر مشاريع وأطر عمل متعددة، مما يضمن الاتساق وقابلية الصيانة. على سبيل المثال، قد تستخدم مؤسسة مالية عالمية Stencil لإنشاء نظام تصميم يُستخدم في تطبيقات الويب الخاصة بها عبر بلدان مختلفة، مما يضمن تجربة علامة تجارية متسقة لعملائها الدوليين.
• منصات التجارة الإلكترونية: يمكن لمنصات التجارة الإلكترونية الاستفادة من Stencil لبناء بطاقات منتجات مخصصة، وعمليات دفع، وعناصر تفاعلية أخرى يمكن دمجها بسهولة في أجزاء مختلفة من الموقع. يمكن لشركة تجارة إلكترونية عالمية استخدام Stencil لبناء مكون بطاقة منتج يُستخدم على موقعها الإلكتروني في مناطق مختلفة، مع تكييف لغة المكون وعملته بناءً على موقع المستخدم.
• أنظمة إدارة المحتوى (CMS): يمكن لمنصات CMS استخدام Stencil لإنشاء كتل محتوى وعناصر واجهة مستخدم قابلة لإعادة الاستخدام يمكن إضافتها بسهولة إلى الصفحات.
• لوحات المعلومات ولوحات الإدارة: يمكن استخدام Stencil لبناء لوحات معلومات تفاعلية ولوحات إدارة بمكونات قابلة لإعادة الاستخدام لتصور البيانات، وإدخالات النماذج، والمزيد.

الخاتمة

Stencil أداة قوية ومتعددة الاستخدامات لبناء مكونات الويب. إن تركيزها على الأداء والتوافق عبر أطر العمل وتجربة المطور الرائعة يجعلها خيارًا ممتازًا لإنشاء مكونات واجهة مستخدم قابلة لإعادة الاستخدام لتطبيقات الويب الحديثة. سواء كنت تبني نظام تصميم، أو منصة تجارة إلكترونية، أو موقعًا بسيطًا، يمكن لـ Stencil مساعدتك في إنشاء مكونات قابلة للتطوير والصيانة من شأنها تحسين أداء تطبيقك وقابليته للصيانة. من خلال تبني مكونات الويب والاستفادة من ميزات Stencil، يمكن للمطورين بناء تطبيقات ويب أكثر قوة ومرونة ومقاومة للمستقبل.

مع استمرار تطور مشهد تطوير الويب، يتمتع Stencil بوضع جيد للعب دور مهم في تشكيل مستقبل تطوير واجهات المستخدم. إن التزامه بمعايير الويب، وتحسين الأداء، وتجربة المطور الإيجابية يجعله أداة قيمة لأي مطور ويب يتطلع إلى بناء مكونات ويب عالية الجودة.